<template>
	<view class="dialog_box" v-if="show">
		<view class="bg" @click="hideDialog()"></view>
		<view class="dialog_content">
			<view class="title"  @click="hideDialog()">{{info.title}}</view>
			<view class="bag">
				<view class="bag_header"  @click="hideDialog()">
					<view class="money">
						<label class="small">¥</label>
						{{info.money}}
					</view>
					<view class="tip">领取后{{info.startTime}}天有效</view>
				</view>
				<view class="bag_body">
					<scroll-view scroll-y="true" class="ul">
						<view class="li" v-for="(val,ind) in info.list">
							<image class="img" src="@/static/bag.png" mode="widthFix"></image>
							<view class="txt">
								<view class="name" v-text="val.name"></view>
								<view class="tip">满{{val.min}}可用</view>
							</view>
							<view class="money">
								<label>¥</label>{{val.money}}<label v-if="val.decimal">.{{val.decimal}}</label>
							</view>
							<view class="lred"></view>
							<view class="rred"></view>
						</view>
						<view style="height: 100rpx;"></view>
					</scroll-view>
				</view>
				<view class="bag_foot">
					<view class="txt">
						去查看>
					</view>
				</view>
			</view>
			<view class="dialog_foot"  @click="hideDialog()">
				<icon class="close" type="cancel" size="26" color="#fff"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["dataInfo"],
		data() {
			return{
				show:false,
				info:this.dataInfo
			}
		},
		onLoad(){
			
		},
		methods:{
			showDialog(){
				this.show = true;
			},
			hideDialog(){
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog_box{
			position: absolute;
			left: 0;
			top:0;
			right: 0;
			bottom: 0;
			z-index: 99;
			.bg{
				position: absolute;
				left: 0;
				top:0;
				right: 0;
				bottom: 0;
				z-index: 1;
				background-color: rgba(0,0,0,0.5);
			}
			.dialog_content{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				z-index: 10;
				text-align: center;
				.title{
					font-size: 50rpx;
					color: #fff;
					margin: 40rpx auto;
				}
				.bag{
					position: relative;
					width: 600rpx;
					margin: auto;
					overflow: hidden;
					.bag_header{
						width: 100%;
						height: 400rpx;
						background:linear-gradient(170deg, #fa9c82,#ff2c21  30%);
						border-radius: 50%;
						.money{
							font-size: 60rpx;
							color: #fff;
							padding-top: 40rpx;
						}
						.small{
							font-size: 30rpx;	
						}
						.tip{
							font-size: 20rpx;
							color: #f1ea5c;
						}
					}
					.bag_body{
						width: 100%;
						height: 500rpx;
						margin: auto;
						background-color: #ff2c21;
						border-bottom-left-radius: 50rpx;
						border-bottom-right-radius: 50rpx;
						margin-top: -200rpx;
						.ul{
							margin:-100rpx 20rpx 20rpx;
							border-radius: 32rpx;
							background-color: #FFFFFF;
							width: calc(100% - 40rpx) ;
							height: calc(100% - 20rpx);
							.li{
								position: relative;
								padding: 20rpx;
								font-size: 0;
								border-bottom: 1px solid #eee;
								
								.lred,.rred{
									position: absolute;
									bottom: -20rpx;
									width: 40rpx;
									height: 40rpx;
									border-radius: 50%;
									background-color: #ff2c21;
								}
								.lred{
									left: -20rpx;
								}
								.rred{
									right: -20rpx;
								}
								&:last-child{
									.lred,.rred{
										display: none;
									}
								}
								.img,.txt,.money{
									vertical-align: middle;
									display: inline-block;
								}
								.img{
									width: 80rpx;
								}
								.txt{
									text-align: left;
									margin-left: 20rpx;
									width: calc(80% - 100rpx);
									.name{
										font-size: 40rpx;
										color: #000;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
									.tip{
										font-size: 20rpx;
										color: #bbbbbb;
									}
								}
								.money{
									font-size: 40rpx;
									color: #ca6143;
									font-weight: 700;
									width: 20%;
									label{
										font-size: 20rpx;
									}
								}
							}
						}
					}
					.bag_foot{
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						height: 100rpx;
						&::before{
							content: "";
							position: absolute;
							left: -10%;
							top: -100rpx;
							width: 120%;
							height: 100rpx;
							border-radius: 50%;
							box-shadow: 0 50rpx 0 0 #f4c35d;
						}
						&::after{
							content: "";
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 100%;
							background-image:linear-gradient(#f4c35d,#fb3e2a)
						}
						.txt{
							position: absolute;
							left: 0;
							top: 0;
							z-index: 10;
							width: 100%;
							height: 100rpx;
							line-height: 100rpx;
							font-size: 30rpx;
							color: #fff;
							text-align: center;
						}
					}
				}
			}
			.dialog_foot{
				margin-top: 40rpx;
				text-align: center;
			}
		}
	
</style>
